<template>
	<view
		:style="'order:'+item.order+';'+item.css"
		class="list-circle">
		<template v-if="listStatus == 'success'">
			<template v-for="item in list">
				<template v-if="item.html">
					<mp-html :content="item.html" :selectable="true"/>
				</template>
				<template v-else>
					<view
						@click="$_to('post/detail?pid='+item.pid)"
						class="for">
						<view
							class="_left"
							@click.stop="$_to('user/detail?uid=' + item.author.uid)">
							<image :src="item.author.avatar" mode="widthFix"></image>
						</view>
						<view class="_right">
							<view class="nickname">
								{{item.author.nickname?item.author.nickname:'?'}}
								<template v-if="item.author.gender != 1">
									<text
										:style="item.author.gender==3?'color: #ff00ff;':'color: #409EFF;'"
										:class="item.author.gender==3?'iconfont icon-nv':'iconfont icon-nan'"></text>
								</template>
								<text class="p" :style="item.author.nicknameColor?'color:'+item.author.nicknameColor+';':''">{{item.author.roleName}}</text>
								<view class="_position" v-if="item.geotag">
									<text class="iconfont icon-dingwei1"></text>
									<text class="_position_POI">{{item.geotag.name}}</text>
								</view>
							</view>
							<!-- 文字摘要 -->
							<view class="title" v-if="item.title">{{item.title}}</view>
							<view class="content" :style="item.title?'':'color:#303133;font-size: 32rpx;line-height: 45rpx;margin-top: 10rpx;'">{{$_filterHtml(item.content)}}</view>
							<!-- 文件 -->
							<public-list-files :item="item.files"></public-list-files>
							<view
								class="post-info"
								:style="!item.previewLikeUsers.length && !item.previewComments.length?'margin-bottom: 0;':''">
								
								<text class="p">{{item.createdTimeAgo}}</text>
								<text class="p" v-if="item.group">来自 {{item.group.name}}</text>
								<view class="type" @click.stop="clickUserMarkMoreButton(item.pid)">
									<text class="iconfont icon-tupian" v-if="item.files.images.length"></text>
									<text class="iconfont icon-zhibo" v-if="item.files.videos.length"></text>
									<text class="iconfont icon-yuyin" v-if="item.files.audios.length"></text>
									<text class="iconfont icon-gengduo"></text>
								</view>
							</view>
							<view
								class="like"
								v-if="item.previewLikeUsers.length">
								<view class="like-count">{{item.likeCount}}赞</view>
								<view class="like-box">
									<view v-for="like in item.previewLikeUsers">
										<image :src="like.avatar" mode="widthFix"></image>
									</view>
								</view>
							</view>
							<view class="comment" v-if="item.previewComments.length">
								<template v-for="comment in item.previewComments">
									<view class="_for">
										<text class="_nickname">{{comment.author.nickname}}:</text>
										<text class="iconfont icon-yuyin" v-if="comment.files.audios.length"></text>
										<text class="_content">{{$_filterHtml(comment.content)}}</text>
									</view>
								</template>
							</view>
						</view>
					</view>
				</template>
			</template>
			<view
				v-if="item.page"
				@click="clickMoreButton"
				class="more">{{listPageText}}</view>
		</template>
		<template v-if="listStatus == 'loading'">
			<view class="_loading">
				<view class="skeleton-screen" v-for="itemData in item.query.pageSize?item.query.pageSize:1"></view>
			</view>
		</template>
		<template v-if="listStatus == 'empty'">
			<global-empty></global-empty>
		</template>
	</view>
</template>

<script>
	export default {
		name:"list-circle",
		props:{
			item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				list:[],
				listStatus:"loading",
				listPage:2,
				listPageText: this.$t('clickToLoadMore')
			};
		},
		mounted(){
			this.getList();
		},
		methods: {
			getList(){
				this.$_request(
					"GET", "/api/fresns/v1/post/list",
					{
						...this.item.query,
						"filterType":"whitelist",
						"filterKeys":"pid,author,title,content,files,group,hashtags,previewLikeUsers,previewComments,geotag,createdTimeAgo,likeCount",
						"filterGroupType":"whitelist",
						"filterGroupKeys":"cover,name",
						"filterHashtagType":"whitelist",
						"filterHashtagKeys":"name",
						"filterGeotagType":"whitelist",
						"filterGeotagKeys":"name",
						"filterAuthorType":"whitelist",
						"filterAuthorKeys":"uid,username,nickname,avatar,roleName,nicknameColor",
						"filterPreviewLikeUserType":"whitelist",
						"filterPreviewLikeUserKeys":"uid,username,nickname,avatar,roleName,nicknameColor",
						"filterPreviewCommentType":"whitelist",
						"filterPreviewCommentKeys":"content,author.nickname,files",
						"page":1
					},
					(res) => {
						if (res.data.data.list.length) {
							if(this.item.randomInsertion.status){
								this.list = res.data.data.list;
								const randomObject = this.item.randomInsertion;
								const randomIndex = Math.floor(Math.random() * (this.list.length + 1));
								this.list.splice(randomIndex, 0, randomObject);
							}else{
								this.list = res.data.data.list;
							}
							this.listStatus = "success";
						} else {
							this.listStatus = "empty";
						}
					}
				)
			},
			clickMoreButton(){
				if (this.listPageText == this.$t('loading')) { return }
				this.listPageText = this.$t('loading');
				this.$_request(
					"GET", "/api/fresns/v1/post/list",
					{
						...this.item.query,
						"filterType":"whitelist",
						"filterKeys":"pid,author,title,content,files,group,hashtags,previewLikeUsers,previewComments,geotag,createdTimeAgo,likeCount",
						"filterGroupType":"whitelist",
						"filterGroupKeys":"cover,name",
						"filterHashtagType":"whitelist",
						"filterHashtagKeys":"name",
						"filterGeotagType":"whitelist",
						"filterGeotagKeys":"name",
						"filterAuthorType":"whitelist",
						"filterAuthorKeys":"uid,username,nickname,avatar,roleName,nicknameColor",
						"filterPreviewLikeUserType":"whitelist",
						"filterPreviewLikeUserKeys":"uid,username,nickname,avatar,roleName,nicknameColor",
						"filterPreviewCommentType":"whitelist",
						"filterPreviewCommentKeys":"content,author.nickname,files",
						"page": this.listPage
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = this.list.concat(res.data.data.list);
							this.listPage++
							this.listPageText = this.$t('clickToLoadMore')
						} else {
							this.listPageText = this.$t('listEmpty')
						}
					}
				)
			},
			clickUserMarkMoreButton(pid){
				uni.showActionSheet({
					itemList: ['点赞', '收藏'],
					success: (res) => {
						if(res.tapIndex === 0){
							this.clickUserMarkButton('like',pid);
						}
						if(res.tapIndex === 1){
							this.clickUserMarkButton('follow',pid);
						}
					}
				});
			},
			clickUserMarkButton(type,pid){
				uni.showLoading();
				this.$_request(
					"POST","/api/fresns/v1/user/mark",
					{
						"markType":type,
						"type":"post",
						"fsid":pid
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code === 0){
							uni.showToast({
								icon: 'success',
								duration: 1500
							});
						}else{
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 1500
							});
						}
					}
				)
			},
		},
	}
</script>

<style lang="scss" scoped>
.list-circle{
	._loading{
		background: #FFF;
		padding: 25rpx 0 1rpx 0;
		.skeleton-screen{
			width: 100%;
			height: 50rpx;
			margin-bottom: 25rpx;
		}
	}
	.for{
		display: flex;
		padding: 25rpx 0;
		border-bottom: 1rpx solid $border;
		._left{
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			border-radius: 150rpx;
			flex-shrink: 0;
		}
		._right{
			flex: 1;
			margin-left: 25rpx;
			.nickname{
				display: flex;
				align-items: center;
				font-weight: bold;
				color: $darkBlue;
				line-height: 28rpx;
				font-size: 28rpx;
				padding-top: 10rpx;
				.p{
					font-size: 22rpx;
					font-weight: normal;
					padding-left: 5rpx;
					color: $placeholder;
					flex-shrink: 0;
				}
				.iconfont{
					font-size: 22rpx;
					font-weight: normal;
					color: $placeholder;
					flex-shrink: 0;
					padding-left: 5rpx;
				}
				._position{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					line-height: 22rpx;
					margin-top: 15rpx;
					margin-bottom: 15rpx;
					margin-left: 15rpx;
					text{
						font-size: 22rpx;
						color: $placeholder;
					}
					.iconfont{
						margin-right: 5rpx;
					}
					._position_POI{
						max-width: 350rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						font-weight: normal;
					}
				}
			}
			.title{
				font-weight: bold;
				margin-top: 20rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				font-size: 32rpx;
				line-height: 32rpx;
			}
			.content{
				word-break: break-all;
				margin-top: 15rpx;
				font-size: 28rpx;
				line-height: 45rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
			.post-info{
				margin: 15rpx 0 15rpx 0;
				display: flex;
				align-items: center;
				.p{
					font-size: 22rpx;
					color: $placeholder;
					padding-right: 10rpx;
				}
				.type{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					text{
						margin-left: 10rpx;
						color: #FFF;
						font-size: 18rpx;
						line-height: 18rpx;
						padding: 5rpx;
						border-radius: 2rpx;
					}
					.icon-gengduo{
						display: flex;
						align-items: center;
						justify-content: center;
						color: $primary;
						padding: 0 10rpx;
						height: 26rpx;
						background: $border;
					}
					.icon-tupian{
						background: $blue;
					}
					.icon-zhibo{
						background: $red;
					}
					.icon-yuyin{
						background: $green;
					}
				}
			}
			.like{
				padding: 15rpx 20rpx;
				line-height: 38rpx;
				border-bottom: 1px solid $border;
				background: $background;
				display: flex;
				align-items: center;
				.like-count{
					display: flex;
					align-items: center;
					background: $border;
					font-size: 22rpx;
					line-height: 22rpx;
					border-radius: 100rpx;
					padding: 0 15rpx;
					color: $placeholder;
					height: 50rpx;
					flex-shrink: 0;
				}
				.like-box{
					flex: 1;
					height: 50rpx;
					overflow: hidden;
					display: flex;
					align-items: center;
					view{
						width: 50rpx;
						height: 50rpx;
						border-radius: 100rpx;
						overflow: hidden;
						margin-left: 10rpx;
						image{
							width: 100%;
						}
					}
				}
			}
			.comment{
				padding: 10rpx 0 15rpx 0;
				background: $background;
				._for{
					padding: 5rpx 25rpx 0 25rpx;
					line-height: 40rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text{
						font-size: 28rpx;
					}
					._nickname{
						font-size: 28rpx;
						color: $darkBlue;
						flex-shrink: 0;
						padding-right: 10rpx;
					}
					.icon-yuyin{
						font-size: 22rpx;
						line-height: 22rpx;
						padding-right: 5rpx;
						color: $green;
					}
					._content{
						font-size: 28rpx;
						word-break: break-all;
					}
				}
			}
		}
	}
	.more{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		line-height: 22rpx;
		color: $placeholder;
		padding: 35rpx 0;
	}
}
.skeleton-screen{
	display: flex;
	border-bottom: 1rpx solid $background;
	padding: 25rpx 0;
	.left{
		width: 80rpx;
		height: 80rpx;
		overflow: hidden;
		border-radius: 15rpx;
		flex-shrink: 0;
	}
	.right{
		flex: 1;
		margin-left: 25rpx;
		view:nth-child(1){
			width: 100%;
			height: 40rpx;
		}
		view:nth-child(2){
			width: 100%;
			height: 120rpx;
			margin: 15rpx 0;
		}
		view:nth-child(3){
			width: 100%;
			height: 150rpx;
		}
	}
}
</style>